<script setup>
import { ref, onMounted, nextTick } from 'vue'

const input = ref('')
const result = ref('0')
const history = ref([])
let ws = null

onMounted(() => {
  connectWS()
})

const connectWS = () => {
  ws = new WebSocket('ws://127.0.0.1:8080')
  ws.onopen = () => {
    addHistory('系统', '计算器已连接', 'sys')
  }
  ws.onmessage = (e) => {
    result.value = e.data
    addHistory('结果', e.data, 'result')
  }
  ws.onclose = () => {
    addHistory('系统', '连接断开，3秒后重连...', 'sys')
    setTimeout(connectWS, 3000)
  }
  ws.onerror = () => {
    addHistory('错误', '通信异常', 'error')
  }
}

const send = () => {
  if (!input.value.trim() || !ws || ws.readyState !== 1) return
  const expr = input.value.trim()
  addHistory('你', expr, 'send')
  ws.send(expr)
  input.value = ''
}

const addHistory = (from, msg, type) => {
  history.value.push({ from, msg, type })
  nextTick(() => {
    const container = document.querySelector('.history')
    container.scrollTop = container.scrollHeight
  })
}

const append = (val) => {
  input.value += val
}
</script>

<template>
  <div class="calc-container">
    <h2>C语言计算器</h2>

    <!-- 历史记录 -->
    <div class="history">
      <div v-for="(h, i) in history" :key="i" :class="h.type">
        <strong>{{ h.from }}:</strong> {{ h.msg }}
      </div>
    </div>

    <!-- 显示屏 -->
    <div class="display">
      <div class="input">{{ input || '0' }}</div>
      <div class="result" :class="{ error: result.startsWith('ERROR') }">
        = {{ result }}
      </div>
    </div>

    <!-- 键盘 -->
    <div class="keyboard">
      <button @click="input = ''">C</button>
      <button @click="input = input.slice(0, -1)">←</button>
      <button @click="append('(')">(</button>
      <button @click="append(')')">)</button>

      <button @click="append('7')">7</button>
      <button @click="append('8')">8</button>
      <button @click="append('9')">9</button>
      <button @click="append('/')">/</button>

      <button @click="append('4')">4</button>
      <button @click="append('5')">5</button>
      <button @click="append('6')">6</button>
      <button @click="append('*')">×</button>

      <button @click="append('1')">1</button>
      <button @click="append('2')">2</button>
      <button @click="append('3')">3</button>
      <button @click="append('-')">-</button>

      <button @click="append('0')">0</button>
      <button @click="append('.')">.</button>
      <button @click="send" class="equal">=</button>
      <button @click="append('+')">+</button>
    </div>
  </div>
</template>

<style scoped>
.calc-container {
  max-width: 400px;
  margin: 2rem auto;
  font-family: 'Segoe UI', sans-serif;
  border: 1px solid #ddd;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  background: #f8f9fa;
}

h2 {
  text-align: center;
  padding: 1rem;
  margin: 0;
  background: #1976d2;
  color: white;
  font-size: 1.2rem;
}

.history {
  height: 120px;
  overflow-y: auto;
  padding: 0.5rem;
  font-size: 0.8rem;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.history .sys { color: #999; font-style: italic; }
.history .send { color: #1976d2; text-align: right; }
.history .result { color: #2e7d32; font-weight: bold; }
.history .error { color: #d32f2f; }

.display {
  padding: 1rem;
  background: #000;
  color: white;
  text-align: right;
}

.input {
  font-size: 1.2rem;
  opacity: 0.8;
  min-height: 1.5rem;
}

.result {
  font-size: 2rem;
  font-weight: bold;
  min-height: 2.5rem;
}

.result.error { color: #ff5252; }

.keyboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #ccc;
}

button {
  padding: 1.2rem;
  font-size: 1.2rem;
  border: none;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

button:hover {
  background: #e3f2fd;
  transform: scale(0.98);
}

button:active {
  background: #bbdefb;
}

.equal {
  background: #1976d2 !important;
  color: white;
  grid-row: span 2;
}

.equal:hover {
  background: #1565c0 !important;
}
</style>